<script lang="ts" setup>
import {type RouteMeta, useRouter} from "vue-router";
import {ref} from "vue";
import screenfull from "screenfull";
import SvgIcon from "./components/Tool/svg-icon.vue";
import {userStore} from "./store";

const routers = useRouter().getRoutes()
const isCollapse = ref(false)
const asideWidth = ref('200px')
const store = userStore()

const handleCollapse = () => {
    isCollapse.value = !isCollapse.value
    asideWidth.value = isCollapse.value ? '64px' : '200px'
}

const handleFullScreen = () => {
    store.isFullScreen = !store.isFullScreen
    store.isFullScreen ? screenfull.request() : screenfull.exit()
}

const handleDarkMode = () => {
    store.isDarkMode = !store.isDarkMode
    if (store.isDarkMode) {
        document.documentElement.classList.add('dark')
    } else {
        document.documentElement.classList.remove('dark')
    }
}

</script>

<template>
    <el-container id="container">
        <el-aside :width="asideWidth" style="height: 100%; ">
            <el-menu default-active="1" :collapse="isCollapse" style="height: 60px; text-align: center">
                <el-menu-item index="1" style="display: flex; justify-content: center">
                    <svg-icon name="logo" width="35px" height="35px"/>
                    <template #title><h2 style="padding-left: 8px">Lei Tools</h2></template>
                </el-menu-item>
            </el-menu>
            <el-scrollbar style="height: calc(100% - 60px)">
                <el-menu
                    :default-active="$route.path"
                    :router="true"
                    class="menu-aside"
                    :collapse="isCollapse"
                >
                    <template v-for="router in routers">
                        <el-menu-item
                            :index="router.path"
                            v-if="router.children.length === 0 && !router.meta.child">
                            <el-icon>
                                <svg-icon :name="router.meta.icon as string" width="20px" height="20px"/>
                            </el-icon>
                            <template #title>
                                {{ router.meta.title }}
                            </template>
                        </el-menu-item>
                        <el-sub-menu
                            :index="router.path" v-else-if="router.children.length !== 0">
                            <template #title>
                                <el-icon>
                                    <svg-icon :name="router.meta.icon as string" width="20px" height="20px"/>
                                </el-icon>
                                <span>{{ router.meta.title }}</span>
                            </template>
                            <el-menu-item v-for="child in router.children" :index="child.path">
                                <el-icon>
                                    <svg-icon :name="(child.meta as RouteMeta).icon as string" width="20px" height="20px"/>
                                </el-icon>
                                <template #title>
                                    {{ (child.meta as RouteMeta).title }}
                                </template>
                            </el-menu-item>
                        </el-sub-menu>
                    </template>
                </el-menu>
            </el-scrollbar>
        </el-aside>
        <el-container>
            <el-header style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
                <el-row style="display: flex; align-items: center; width: 100%">
                    <el-col :span="1" style="line-height: 60px; text-align: center">
                        <el-button @click="handleCollapse" class="head-bnt">
                            <el-icon :size="20">
                                <svg-icon :name="isCollapse ? 'expand' : 'fold'" width="25px" height="25px"/>
                            </el-icon>
                        </el-button>
                    </el-col>
                    <el-col :span="23" style="display: flex; justify-content: end; vertical-align: middle">
                        <el-button class="head-bnt" @click="handleFullScreen">
                            <el-icon :size="23">
                                <svg-icon :name="store.isFullScreen ? 'fulloff' : 'full'" width="20px" height="20px"/>
                            </el-icon>
                        </el-button>
                        <el-button class="head-bnt" @click="handleDarkMode">
                            <el-icon :size="23">
                                <svg-icon :name="store.isDarkMode ? 'dark' : 'light'" width="20px" height="20px"/>
                            </el-icon>
                        </el-button>
                        <el-dropdown style="outline: none; margin-left: 15px" class="head-bnt">
                            <span style="display: flex; align-items: center; cursor: pointer; border: none">
                                <el-icon :size="23">
                                  <svg-icon name="vue" width="20px" height="20px"/>
                                </el-icon>大帅哥
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>
                                        <span style="display: flex; align-items: center; cursor: pointer">
                                        <el-icon>
                                          <svg-icon name="setting" width="20px" height="20px"/>
                                        </el-icon>
                                        设置
                                        </span>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-icon>
                                            <svg-icon name="user" width="20px" height="20px"/>
                                        </el-icon>
                                        个人中心
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<style lang="css" scoped>
#container {
    width: 100%;
    height: 100%;
}

.el-aside {
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.el-menu {
    border-right: none !important;
}

.head-bnt {
    border: none !important;
}


.el-tooltip__trigger:hover {
    outline: none !important;
}

.el-tooltip__trigger:focus {
    outline: none !important;
}

.el-main {
    padding: 4px 8px !important;
}
</style>
